<template>
  <div>
    <div class="bj-class"></div>
    <div class="content-class">
      <div>
        <!-- <van-image width="100" height="100" src="@/static/icon/Login/slogan.png" /> -->
        <img style="width: 240px; height: 92px" src="../../assets/iconLogin/slogan.png" />
      </div>
      <div>
        <van-form validate-first @submit="submit" ref="form">
          <!-- 通过 pattern 进行正则校验 -->
          <van-field label-width="4.2em" :border="true" v-model="form.tel" type="tel" label="+86" name="tel"
            placeholder="请输入手机号" :rules="rules.tel">
            <template #right-icon>
              <img @click="empty" v-if="form.tel" class="img-icon" :src="require('@/assets/iconLogin/input-clear.png')" />
            </template>
          </van-field>
          <van-field label-width="4.2em" v-model="form.code" type="digit" center label="验证码" placeholder="请输入验证码"
            :rules="rules.code">
            <template #button>
              <div>
                <span v-if="countdown" @click="getCode">{{ text }}</span>
                <span style="color: rgba(118, 118, 118, 1); font-size: 16px" v-if="!countdown">{{ count }}s</span>
              </div>
            </template>
          </van-field>
          <van-field label-width="4.2em" :border="true" v-model="form.spread" type="digit" label="邀请码"
            placeholder="请输入邀请码(选填)">
          </van-field>
          <div style="margin-top: 40px">
            <van-button :disabled="form.agreement == 1 ? false : true" round block type="info" native-type="submit"
              color="linear-gradient(180deg, #3764EC 0%, #6B85F7 100%)">登录</van-button>
          </div>
          <div class="agreement-class">
            <van-radio-group v-model="form.agreement">
              <van-radio name="1">我已经阅读并同意《<span
                  @click.stop="handle(user_services)">用户服务协议</span>》/《<span
                  @click.stop="handle(user_privacy)">用户隐私政策</span>》
                <template #icon="props">
                  <img class="img-icon" :src="props.checked ? dgimg : wdgimg" />
                </template>
              </van-radio>
            </van-radio-group>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
// import {checkMobile} from "@/utils/fun"
import { verify, login, enterim } from '@/api/index'

export default {
  name: 'Login',
  data() {
    return {
      // isbutton: true,
      dgimg: require('@/assets/iconLogin/checkbox-checked.png'),
      wdgimg: require('@/assets/iconLogin/checkbox.png'),
      form: {
        tel: '',
        code: '',
        spread: '',
        agreement: 0,
      },
      rules: {
        tel: [
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '请输入正确的手机号码',
            trigger: 'onBlur',
          },
        ],
        code: [
          {
            pattern: /^\d{4}$/,
            message: '请输入4位验证码',
            trigger: 'onBlur',
          },
        ],
      },
      countdown: true, //验证码的状态，默认显示发送验证码
      count: '', //60秒倒计时
      timer: null,
      text: '发送验证码',
      user_privacy:'',
      user_services:'',
    }
  },
  async mounted() {
    this.$store.dispatch("siteConfig/setting", '');
    this.user_privacy = this.$store.getters['siteConfig/user_privacy'];
    this.user_services =this.$store.getters['siteConfig/user_services'];
    if (this.$store.state.token && this.$store.state.app_key && this.$store.state.did) {
      this.$router.push({ path: '/index' })
    }
  },
  methods: {
    //验证通过
    submit(value) {
      login({
        phone: this.form.tel,
        captcha: this.form.code,
        spread: this.form.spread,
      }).then((res) => {
        console.log(res, 'denglui')
        if (!res.data.user.is_cancel) {
          this.$store.commit('SET_TOKEN', res.data.token)
          this.$store.commit('SET_USERINFO', res.data.user)
          //是否已完成基础信息
          if (res.data.user.is_complete == 0) {
            this.$router.push({ path: '/PerfectInformation' })
          } else {
            enterim().then(ress => {
              console.log(ress);
              console.log('Loginuser:' + this.$store.state.userInfo.uid +
                'accessToken:' + this.$store.state.access_token)
              this.$store.commit('SET_ACCESS_TOKEN', ress.data.access_token)
              WebIM.conn
                .open({ user: this.$store.state.userInfo.uid.toString(), accessToken: ress.data.access_token })
                .then((res) => {
                  console.log(WebIM);
                  console.log("%ctoken登录成功", "color:#6ad1c7", res);
                  this.$router.push({ path: '/index' })
                })
                .catch((e) => {
                  console.log("%ctoken登录失败", "color:#ef8784", e);
                });
            })
          }
        }
      })
      // console.log(value);
    },
    //发送验证码
    getCode() {
      this.$refs.form
        .validate('tel')
        .then((result) => {
          if (this.form.agreement == 0) {
            this.$toast('请勾选用户协议！')
            return
          }

          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.countdown = false
            this.text = '重新发送'
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.countdown = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
          //发送验证码
          verify({
            phone: this.form.tel,
          }).then((res) => {
            if (res.status == 200) {
              this.$toast('验证码发送成功')
            }
          })
        })
        .catch((err) => {
          // console.log(err);
        })
    },
    //清空
    empty() {
      this.form.tel = ''
    },
    handle(url) {
      window.location.href = url
    },
  },
}
</script>

<style scoped lang="scss">
.bj-class {
  width: 100%;
  height: 148px;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
}

.content-class {
  margin: 0px 20px;

  // &>div:nth-child(2) {
  //     margin-top: 20px;
  // }
}

::v-deep .van-cell {
  // padding: 15px 0px !important;
  // background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%) !important;
  border-radius: 8px !important;
  background: RGBA(236, 239, 254, 1) !important;
  border: 1px solid rgba(82, 117, 241, 0.3) !important;

  &>.van-field__label {
    border-right: 1px solid #d8d8d8 !important;
    font-size: 16px !important;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #767676;
    // padding-left: 30px !important;
  }

  &>div:nth-child(2) {
    & .van-field__button {
      // margin-right: 15px !important;
      color: rgba(26, 26, 26, 1) !important;
      font-size: 16px !important;
    }
  }

  &::after {
    display: none !important;
  }

  margin-top: 20px !important;
}

.agreement-class {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 15px;
  margin-bottom: 20px;
}

::v-deep .van-radio__icon {
  // height:auto;
  // margin-top: -5px;
}

::v-deep .van-radio__label {
  color: rgba(118, 118, 118, 1) !important;
  font-size: 10px !important;

  &>span {
    color: rgba(26, 26, 26, 1);
  }
}

.img-icon {
  height: 20px;
}

::v-deep .van-button--round {
  border-radius: 8px !important;
}

::v-deep .van-button--disabled {
  background: #d8d8d8 !important;
  border-color: #d8d8d8 !important;
}

::v-deep .van-field__right-icon {
  line-height: 50% !important;
}

::v-deep .van-button--normal {
  font-size: 16px !important;
}
</style>
